<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>格式化输入框 - inputFormat-原生js封装</title>
	<link rel="shortcut icon" href="../public/image/favicon.ico" type="images/x-icon"/>
	<link rel="icon" href="../public/image/favicon.png" type="images/png"/>
	<link rel="stylesheet" type="text/css" href="../public/style/cssreset-min.css">
	<link rel="stylesheet" type="text/css" href="../public/style/common.css">
	<style type="text/css">
		.input {
			margin-bottom: 25px;
		}
	</style>
	<script type="text/javascript" src="../code/inputFormat.js"></script>
</head>
<body>
	<div class="header">
        <a href="https://github.com/huanghanzhilian/widget" target="_blank">项目地址</a>
        <a href="/">返回首页</a>
    </div>
    <div class="main">
		<div class="input">
			<p>货币：<input type="text" name="currency" placeholder="100,000.00"></p>
		</div>
		<div class="code">
			<p>货比格式</p>
			new inputFormat('input[name="currency"]');
		</div>
		<script>
			new inputFormat('input[name="currency"]');
		</script>
		<div class="input">
			<p>手机号：<input type="text" name="mobile" placeholder="188 8888 8888"></p>
		</div>
		<div class="code">
		<p>手机格式</p>
<pre>
new inputFormat('input[name="mobile"]', {
	type: 'mobile'
});
</pre>
		</div>
		<script>
			new inputFormat('input[name="mobile"]', {
				type: 'mobile'
			});
		</script>
		<div class="example">
			<div class="call">
				<h1>调用方法：</h1>
				<p>new inputFormat("selector",options,callback(api));</p>
			</div>
			<h2>options参数</h2>
			<table>
				<thead>
					<tr>
						<th width="150">参数</th>
						<th width="80">默认值</th>
						<th>说明</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>type</td>
						<td>'currency'</td>
						<td>格式化数据类型:'currency'货币,'mobile'手机号</td>
					</tr>
					<tr>
						<td>tofixed</td>
						<td>2</td>
						<td>四舍五入的位数</td>
					</tr>
				</tbody>
			</table>
			<h2>callback(api)参数</h2>
			<table>
				<thead>
					<tr>
						<th width="200">方法</th>
						<th>说明</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>formats(value)</td>
						<td>格式化指定值,返回格式化后结果</td>
					</tr>
					<tr>
						<td>setValue(value)</td>
						<td>设置输入框值</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</body>
</html>